<template>
  <a-layout class="dashboard-page">
    <a-layout class="dashboard-wrapper">
      <a-layout-sider class="dashboard-menu-sider" :class="collapsed ? 'menu-sider-collapsed' : ''" v-model:collapsed="collapsed">
        <div class="menu-list">
          <a-menu
              class="menu"
              v-model:selectedKeys="selectedMenuKeys"
              v-model:openKeys="openMenuKeys"
              mode="inline">
            <menu-item-component :menu-list="menuList"></menu-item-component>
          </a-menu>
        </div>
        <div class="collapsed-box">
<!--          <a-button type="link" class="link-btn" @click="handleGotoWorkbench">工作台</a-button>-->
          <i class="expand-icon iconfont " :class="collapsed ? 'icon-zhankai' : 'icon-shouqi'" @click="handleChangeExpand"></i>
        </div>
      </a-layout-sider>
      <a-layout-content class="dashboard-content">
        <router-view/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import {onMounted, provide, ref, watch} from 'vue'
import {useRoute, useRouter} from "vue-router";
import {MenuItem} from './types/common'
import MenuItemComponent from './components/menu-item-component.vue'
import {message} from "ant-design-vue";
const route = useRoute()
const router = useRouter()
const menuList = ref<MenuItem[]>([
  {
    label: '设备管理',
    icon: 'icon-a-shebei5',
    path: '/manage/device',
    name: 'DeviceManage'
  },
  {
    label: '人员管理',
    icon: 'icon-renyuanguanli',
    path: '/manage/person',
    name: 'PersonManage'
  },
  {
    label: '审批流程管理',
    icon: 'icon-shenpiliuchengguanli',
    path: '/manage/apply-category',
    name: 'ApplyCategoryManage'
  },
  {
    label: '申请管理',
    icon: 'icon-chuchashenpi',
    path: '/manage/apply',
    name: 'ApplyManage'
  },
  {
    label: '飞手管理',
    icon: 'icon-a-3-2feishouguanli',
    path: '/manage/flyer',
    name: 'FlyerManage'
  },
  // {
  //   label: '审批管理',
  //   icon: 'icon-taizhangzhongxin',
  //   path: '/manage/approve',
  //   name: 'ApplyManage'
  // },
])
const openMenuKeys = ref<String[]>([])

const collapsed = ref(false)
provide('collapsed', collapsed)
const selectedMenuKeys = ref<string[]>([])
const setSelectedMenuKeys = () => {
  selectedMenuKeys.value = [route.path]
  console.log('selectedMenuKeys.value', selectedMenuKeys.value)
}
const setOpenMenuKeys = () => {
  openMenuKeys.value = []
  // console.log(route)
  const pathArr = route.path.split('/')
  const loopExe = (arr: string[]) => {
    const path = arr.join('/')
    if (path) {
      openMenuKeys.value.push(path)
    }
    arr.pop()
    if (arr.length) {
      loopExe(arr)
    }
  }
  loopExe(pathArr)
  console.log('openMenuKeys.value', openMenuKeys.value)
}
setSelectedMenuKeys()
setOpenMenuKeys()
watch(() => route.path,newRoute=> {
  setSelectedMenuKeys()
  setOpenMenuKeys()
})


onMounted(() => {

})
const handleChangeExpand = () => {
  collapsed.value = !collapsed.value
}

</script>

<style scoped lang="less">
@import "./assets/var.less";
.@{ant-prefix}-layout{
  background: @bg-color;
}
.cp-menu-horizontal{
  border-bottom: none;
}
  .dashboard-page{
    position: relative;
    width: 100%;
    height: 100%;
  }
  .@{ant-prefix}-layout-header{
    position: fixed;
    width: 100%;
    background: @bg-color;
    padding: 0 30px;
    box-shadow: 0px 0px 5px @box-shadow-color;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
  }
  .dashboard-menu{
    padding-right: 50px;
  }
  .@{ant-prefix}-layout-sider{
    background: @bg-color;
  }
  .dashboard-wrapper{
    position: relative;
    height: 100%;
  }
  .dashboard-content{
    background: @content-bg-color;
    position: relative;
    padding: 10px;
  }
  .dashboard-menu-sider{
    border-right: 1px solid @border-color-base;
  }
  .menu-list{
    position: relative;
    padding: 0;
    overflow-x: hidden;
    height: 100%;
    background: @bg-color;
    .menu{
      border-right: none;
    }
  }
  .collapsed-box{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 39px;
    border-top: 1px solid @border-color-base;
    display: flex;
    align-items: center;
    justify-content: center;
    .expand-icon{
      position: absolute;
      right: 10px;
      top:5px;
      font-size: 20px;
      cursor: pointer;
      z-index: 1;
    }
    .link-btn{
      font-size: 16px;
    }
  }
  .menu-sider-collapsed{
    .collapsed-box{
      justify-content: flex-start;
      .link-btn{
        font-size: 14px;
        padding-left: 0px;
      }
    }
  }
</style>
